<template>
	<view class="container">
		<z-paging ref="paging" v-model="dataList" @query="queryList()">
			<view class="message-item" v-for="(item, index) in dataList" :key="index">
				<view class="header">
					<text class="title">{{ item.title }}</text>
					<text class="time">{{ item.createTime }}</text>
				</view>
				<view class="content" @click="copyContent(item.shareUrl)">
					分享链接：{{ item.shareUrl }}
				</view>
				<view class="content" @click="copyContent(item.shareCode)">
					提取码：{{ item.shareCode }}
				</view>
			</view>
		</z-paging>
	</view>
</template>

<script>
	import {
		messageList
	} from '@/api/cms/cms';
	export default {
		data() {
			return {
				// v-model绑定的这个变量不要在分页请求结束中自己赋值，直接使用即可
				dataList: []
			};
		},
		methods: {
			// @query所绑定的方法不要自己调用！！需要刷新列表数据时，只需要调用this.$refs.paging.reload()即可
			queryList(pageNo, pageSize) {
				// 此处请求仅为演示，请替换为自己项目中的请求
				//            this.$request.queryList({ pageNo,pageSize }).then(res => {
				// // 将请求结果通过complete传给z-paging处理，同时也代表请求结束，这一行必须调用
				//            	this.$refs.paging.complete(res.data.list);
				//            }).catch(res => {
				//            	// 如果请求失败写this.$refs.paging.complete(false)，会自动展示错误页面
				//            	// 注意，每次都需要在catch中写这句话很麻烦，z-paging提供了方案可以全局统一处理
				//            	// 在底层的网络请求抛出异常时，写uni.$emit('z-paging-error-emit');即可
				//            	this.$refs.paging.complete(false);
				//            })

				messageList({
					pageNo,
					pageSize
				}).then(res => {
					this.$refs.paging.complete(res.rows);
				}).catch(res => {
					// 如果请求失败写this.$refs.paging.complete(false)，会自动展示错误页面
					// 注意，每次都需要在catch中写这句话很麻烦，z-paging提供了方案可以全局统一处理
					// 在底层的网络请求抛出异常时，写uni.$emit('z-paging-error-emit');即可
					this.$refs.paging.complete(false);
				})
			},
			// 复制内容
			copyContent(content) {
				uni.setClipboardData({
					data: content,
					success: () => {
						uni.showToast({
							title: '内容已复制',
							icon: 'success'
						});
					}
				});
			}
		},
		onShow() {
			// console.log("刷新list")
			this.queryList()
		}
	};
</script>


<style scoped>
	.container {
		padding: 20rpx;
	}

	.message-item {
		background-color: #fff;
		border-radius: 10rpx;
		padding: 20rpx;
		margin-bottom: 20rpx;
		box-shadow: 0 2rpx 6rpx rgba(0, 0, 0, 0.1);
	}

	.header {
		display: flex;
		justify-content: space-between;
		margin-bottom: 15rpx;
	}

	.title {
		font-size: 30rpx;
		font-weight: bold;
		color: #333;
	}

	.time {
		font-size: 24rpx;
		color: #999;
	}

	.content {
		font-size: 28rpx;
		color: #666;
		line-height: 1.5;
		padding: 15rpx;
		background-color: #f5f5f5;
		border-radius: 8rpx;
		word-break: break-all;
	}
</style>